<template>
  <div v-loading="loading" class="wx-cert-main">
    <!-- filter start -->
    <div class="flex-x-between-start">
      <el-form ref="filterForm" :inline="true" :model="filterForm" label-width="100px" size="small">
        <el-form-item
          prop="name"
          label="商户号："
        >
          <el-input
            v-model="filterForm.name"
            placeholder="请输入"
            clearable
            class="app-w-350"
          />
        </el-form-item>
        <el-form-item
          prop="fullName"
          label="备注："
        >
          <el-input
            v-model="filterForm.fullName"
            placeholder="请输入"
            clearable
            class="app-w-350"
          />
        </el-form-item>
        <div>
          <el-form-item label=" ">
            <el-button type="primary" round @click="submitFilterForm">查询证书</el-button>
            <el-button round @click="resetFilterForm">重置条件</el-button>
          </el-form-item>
        </div>

      </el-form>
      <div>
        <el-button type="primary" size="small" round class="btn-tree" @click="handleAddCert">新增证书</el-button>
      </div>
    </div>
    <!-- filter end -->

    <!-- 表格 start -->
    <el-table :data="list" border stripe size="small">
      <el-table-column label="序号" type="index" align="center" width="60">
        <template slot-scope="scope">
          <span>{{ (paginationConfig.page - 1) * paginationConfig.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="business.serial" label="商户号" />
      <el-table-column prop="business.serial" label="类型" />
      <el-table-column prop="business.userSuffix" label="备注" />
      <el-table-column prop="business.userSuffix" label="添加时间" />
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEditCert(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelCert(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PaginationDirection
      v-if="paginationConfig.total!==0"
      :config.sync="paginationConfig"
      @sizesChange="fetchData"
      @pageChange="fetchData"
    />
    <!-- 表格 end -->

  </div>
</template>

<script>
import { mchPage } from '@/api/mch/index'
// import { delUser } from '@/api/user'
export default {
  props: {
    tabName: {
      type: String,
      default: 'search'
    }
  },
  data() {
    return {
      // 配置
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      loading: false,
      // 数据
      list: [],
      filterForm: {
        name: '',
        fullName: ''
      }
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取列表
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 请求参数
      const params = Object.assign({}, this.filterForm)
      params.pageNum = page
      params.pageSize = pageSize
      // 清除多余字段
      for (const key in params) {
        if (this.$isNull(params[key])) delete params[key]
      }
      // 请求
      this.loading = true
      console.log(params)
      mchPage({ data: params })
        .then(res => {
          this.list = res.data.list || []
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * 按钮组
     */
    // 查询
    submitFilterForm() {
      this.fetchData(1)
    },

    // 重置
    resetFilterForm() {
      this.$refs.filterForm.resetFields()
    },

    // 新增
    handleAddCert(row) {

    },

    // 编辑
    handleEditCert(row) {

    },

    // 删除
    handleDelCert(row) {
      this.$confirm(
        `确定删除证书：${row.name} ?`,
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          roundButton: true
        }
      )
        .then(() => {
          // const params = { userId: row.id }
          // this.loading = true
          // delUser({ params })
          //   .then(() => {
          //     this.$notify({
          //       title: '成功',
          //       message: '删除成功',
          //       type: 'success',
          //       duration: 2000,
          //       offset: 40
          //     })
          //     this.fetchData()
          //   })
          //   .finally(() => {
          //     this.loading = false
          //   })
        })
        .catch(() => {
        })
    }

    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wx-cert-main {
  padding-top: 10px;

}
</style>
